<template>
	<view class="time-tag" v-if="showTime">
		{{ displayTime }}
	</view>
</template>

<script>
export default {
	props: {
		timestamp: {
			type: Number,
			required: true
		},
		pretime: {
			type: Number,
			default: 0
		}
	},
	computed: {
		showTime() {
			if (this.pretime === 0) return true;
			const diff = this.timestamp - this.pretime;
			return diff > 5 * 60 * 1000;
		},
		displayTime() {
			const date = new Date(this.timestamp);
			const now = Date.now();
			const diff = now - this.timestamp;

			if (diff < 60 * 1000) return '刚刚';
			if (diff < 60 * 60 * 1000) return `${Math.floor(diff / 60000)}分钟前`;
			if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / 3600000)}小时前`;

			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');

			return `${year}-${month}-${day} ${hours}:${minutes}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.time-tag {
	font-size: 24rpx;
	color: #999;
	padding: 4rpx 8rpx;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 6rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	display: inline-flex; // 使用 inline-flex 替代 inline-block
	justify-content: center;
	align-items: center;
	white-space: nowrap; // 防止文本换行
}
</style>